<template>
	<view class="component flex-col-between">
		<view class="label">权限状态</view>
		<view :class="['switch',switchChecked==false?'switch-close':'']" @click="switchChange">
			<view :class="['circle',switchChecked==false?'circle-close':'']" ></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				switchChecked: false
			};
		},
		mounted() {
			this.switchChecked = this.$parent.contact.access_authority.value == 1?true:false
			console.log(this.$parent.contact.access_authority.value ,22)
			console.log('switchChecked', this.switchChecked)
		},
		methods: {
			async editRoot() {
				let access = this.switchChecked == true?"可以":"不可以"
				uni.showLoading({
					title:"修改中"
				})
				let res = await this.$api.editContactRoot({id:this.$parent.id,access_authority:access})
				if(res.data.status == 200) {
					uni.hideLoading()
					this.$tip.success("权限修改成功")
				}
			},
			switchChange() {
				this.switchChecked = !this.switchChecked
				this.editRoot()
			}
		}

	}
</script>

<style lang="scss" scoped>
	.component {
		padding: 38rpx 40rpx;
	}
	.switch {
		width: 112rpx;
		height: 48rpx;
		line-height: 48rpx;
		border: 2rpx solid #55C867;
		border-radius: 42rpx;
		box-sizing: border-box;
		position: relative;
		background: #FCFCFF;
		text-align: right;
		&::after {
			content: "开启";
			width: 48rpx;
			font-size: 24rpx;
			color: #55C867;
			margin-right: 10rpx;
		}
		.circle {
			width: 40rpx;
			height: 40rpx;
			background: #55C867;
			border-radius: 50%;
			position: absolute;
			left: 2rpx;
			bottom: 2rpx;
			transition: 0.2s
		}
	}

	.switch-close {
		border-color: #9D9D9D;
		text-align: left;
		&::after {
			content: "关闭";
			width: 48rpx;
			font-size: 24rpx;
			color: #9D9D9D;
			margin-left: 10rpx;
		}
		.circle-close {
			background: #9D9D9D;
			transform: translateX(64rpx);
			transition: 0.2s;
		}
	}
</style>